﻿<%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="true" CodeBehind="page_stream.aspx.cs" Inherits="SimpleSocxs.manage.page_stream" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var current_jq_panel = null;

        function panel2form(jqElm) {
            $(".style").each(function () {
                var key = $(this).find(".key").text();
                $(this).find(".ctrl").val(jqElm.css(key));
            });

            $(".prop").each(function () {
                var key = $(this).find(".key").text();
                $(this).find(".ctrl").val(jqElm.attr(key));
            });

            $("#streams").empty();
            var stream_ids = jqElm.attr("streamID").split(',');
            for (var i = 0; stream_ids && i < stream_ids.length; i++) {
                var id = stream_ids[i];

                var ddl = createStreamsDropDown(id);                
                $("#streams").append(ddl);
            }
                     
        }

        function form2panel(jqElm) {
            $(".style").each(function () {
                var key = $(this).find(".key").text();
                var val = $(this).find(".ctrl").val();
                if($.trim(val).length > 0)
                    jqElm.css(key, val);
            });

            $(".prop").each(function () {
                var key = $(this).find(".key").text();
                jqElm.attr(key, $(this).find(".ctrl").val());
            });

            var stream_ids = [];
            $("#streams select").each(function() {
                var id = $(this).val();
                stream_ids.push(id);
            });
            
            jqElm.attr("streamID", stream_ids.join(','));
        }

        $(function () {
            $('#btnDelete').click(function () {
                if (!current_jq_panel)
                    return;
                current_jq_panel.remove();
                current_jq_panel = null;
            });

            $('#btnAdd').click(function () {
                var new_pnl = $('<div class="socxs_panel"></div>');
                form2panel(new_pnl);
                if (current_jq_panel)
                    current_jq_panel.after(new_pnl);
                else
                    $('#userPage').contents().find('.socxs_panels').append(new_pnl);
                initPanels(new_pnl);
            });

            $("#btnUpdate").click(function () {
                if (!current_jq_panel) return;
                form2panel(current_jq_panel);
            });

            $("#btnMove2Left").click(function () {
                if (!current_jq_panel)
                    return;
                current_jq_panel.prev().before(current_jq_panel);
            });

            $("#btnMove2Right").click(function () {
                if (!current_jq_panel)
                    return;
                current_jq_panel.next().after(current_jq_panel);
            });

            $("#btnSave").click(function () {
                $('#userPage').contents().find('.selected').removeClass('selected');
                var body = $('#userPage').contents().find('.socxs_panels').html();
                $("#pageBody").val(body);
                $("form").submit();
            });

            $("#btnAddStream").click(function() {
                $("#streams").append(createStreamsDropDown());
            });      
        });

        function createStreamsDropDown(id) {
            var ddl = $($("#ddlStreamsTemp").html()).removeAttr("id").removeAttr("name").removeAttr("class");
            if (id)
                ddl.val(id);
            return $("<div> <a href='#'onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>X</a></div>").prepend(ddl);
        }
        
        function initPanels(jqPanels) {
            $('#userPage').contents().find('.socxs_panel').empty();
            if (!jqPanels)
                jqPanels = $('#userPage').contents().find('.socxs_panel');
            jqPanels.click(function () {
                panel2form(current_jq_panel = $(this));
                $('#userPage').contents().find('.selected').removeClass('selected');
                current_jq_panel.addClass('selected');
            });
        }                             
        
        function initFrame() {
            initPanels();
            $('#userPage').contents().find('head').append(
'<style>.socxs_panels{min-height: 600px;background-color:blue}.socxs_panel{background-color:yellow !important;cusor:pointer;min-height:100px;min-width:100px;}.selected{background-color: orange !important;}</style>');
        }
    </script>

    <style>
        body{overflow:hidden;}
        .streams_pnl, .row span, .row input, .row select{ width: 200px;}
        .streams_pnl{display:inline-block}
        .row span{display:inline-block; text-align:right;vertical-align:top;}
        .panel{overflow:auto;}     
        #streams a{font-size:.8em;}
        #streams select{width:180px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="panel" style="background-color:#AAA;padding:10px;">
        <div style="float:left;font-size:1.1em;font-weight:bold;">
            <div class="prop row"> <span class="key">Title</span>           <input class="ctrl" /> </div>           
            <div class="row"> <span class="key">StreamIDs</span> 
                <div class="streams_pnl">
                    <input id="btnAddStream" type="button" value="Add Stream" />
                    <div id="streams">
                        
                    </div>
                </div>
            </div>                           
            <div class="row"> <span class="key">RenderName</span>      <asp:DropDownList CssClass="ctrl" ID="ddlRenderName" runat="server" /></div>                           
        </div>

        <div style="float:left">
            <div class="style row"><span class="key">width</span>           <input class="ctrl" value="200px" /> </div>
            <div class="style row"><span class="key">height</span>          <input class="ctrl" value="200px" /> </div>   
            <div class="style row"><span class="key">margin-top</span>      <input class="ctrl" value="20px" /> </div>   
            <div class="style row"><span class="key">margin-right</span>    <input class="ctrl" value="20px" /> </div>   
            <div class="style row"><span class="key">margin-bottom</span>   <input class="ctrl" value="20px" /> </div>   
            <div class="style row"><span class="key">margin-left</span>     <input class="ctrl" value="20px" /> </div>   
        </div>
        <div style="float:left">
            <div class="style row"><span class="key">float</span>           <select class="ctrl"><option value="left">left</option><option value="right">right</option><option value="none">none</option></select></div>   
            <div class="style row"><span class="key">clear</span>           <select class="ctrl"><option value="none">none</option><option value="left">left</option><option value="right">right</option><option value="both">both</option></select> </div>                             
            <div class="style row"><span class="key">padding-top</span>     <input class="ctrl" /> </div>   
            <div class="style row"><span class="key">padding-right</span>   <input class="ctrl" /> </div>   
            <div class="style row"><span class="key">padding-bottom</span>  <input class="ctrl" /> </div>   
            <div class="style row"><span class="key">padding-left</span>    <input class="ctrl" /> </div>  
        </div>
           
        <div style="clear:both;text-align:center;padding:5px;">
            <input id="btnAdd" type="button" value="New" />        
            <input id="btnUpdate" type="button" value="Don't Forget to Update" />
            <input id="btnDelete" type="button" value="Delete" />
            <input id="btnMove2Left" type="button" value="Move to Previous" />
            <input id="btnMove2Right" type="button" value="Move to Next" /> 
            <input id="btnSave" type="button" value="Save" />
            <a href='<%=pageUrl%>' target="_blank">View</a>
            <input id="pageBody" name="pageBody" type="hidden" />
        </div>
    </div>
    <div id="ddlStreamsTemp" style="display:none">
        <asp:DropDownList CssClass="ctrl" ID="ddlStreamID" runat="server" />
    </div>
    <iframe id="userPage" src='<%=pageUrl+"?iframe=true" %>' height="800px" width="100%"></iframe>    
    </form>
</body>
</html>
